<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="query">
        <el-form-item>
          <el-input v-model="query.keyword" placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-col>

    <!--列表-->
    <el-table :data="pageInfo.data" highlight-current-row  @selection-change="selsChange"
              style="width: 100%;">
      <el-table-column type="index" label="编号"  width="60">
      </el-table-column>
      <el-table-column prop="name" label="部门管理" width="120" sortable>
      </el-table-column>
      <el-table-column prop="url" label="url" width="120" sortable>
      </el-table-column>
      <el-table-column prop="sn" label="sn" width="320" sortable>
      </el-table-column>
    </el-table>

    <!--工具条-->
    <el-col :span="24" class="toolbar">
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="query.pageSize"
                     :total="pageInfo.total"
                     style="float:right;">
      </el-pagination>
    </el-col>
  </section>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      pageInfo: {
        total: 0, // 总的数据条数
        data: [] // 列表数据
      }, // 分页数据
      query: {  // 查询分页
        currentPage: 1, // 当前页码
        pageSize: 10, // 查询条数
        keyword: '' // 关键字
      },
    }
  },
  methods: {
    // 分页查询携带数据
    search() {
      this.query.currentPage = 1;
      this.getPermission();
    },
    // 监听当前是第几页，查询第几条数据
    handleCurrentChange(val) {
      this.query.currentPage = val;
      this.getPermission();
    },
    //获取用户列表
    getPermission() {
      axios.put("/permission", this.query).then(res => {
        if (res.status == 200) {
          // 查询成功
          this.$message.success("分页查询成功")
          this.pageInfo = res.data.data
        }
      }).catch(() => {
        this.$message.error("分页查询失败")
      })
    },
    // 列表选中列的变化
    selsChange(sels) {
      this.sels = sels;
    }
  },
  mounted() {
    this.getPermission();
  }
}

</script>

<style scoped>

</style>